import '../../../个人网站/css/blog-common.css';
<template>
  <div class="home">
    <!-- ======= Banner ======= -->
    <div id="banner">
      <div class="content">
        <a href="">
          <img src="../assets/images/portrait.png" alt="" />
        </a>
        <p>
          我是一名大三学生，<br />
          同时也是一名<span>Web前端工程师</span>
        </p>
        <div class="about">关于我</div>
      </div>
    </div>
    <!-- End Banner -->

    <!-- ======= 作品展示 ======= -->
    <div id="portfolio" class="section">
      <h2 class="section-title">作品展示</h2>
      <div class="carousel inline-flex flex-column align-items-end" @mouseover="stop" @mouseout="play">
        <div class="btns inline-flex">
          <div class="prev" :class="['prev',currentIndex <=0 ?'invalid':'']" @click="turnPage(-1)"></div>
          <div class="next"  :class="['next',currentIndex >=3 ?'invalid':'']" @click="turnPage(1)"></div>
        </div>
        <ul class="img-list inline-flex" :style="{ left: -currentIndex * 4.1 + 'rem'}">
          <li>
            <img src="../assets/images/portfolios/1@2x.png" alt="" />
            <div class="info flex flex-column justify-content-end">
              <h4>App1</h4>
              <a href=""><i class="iconfont qm-link"></i></a>
            </div>
          </li>
          <li>
            <img src="../assets/images/portfolios/2@2x.png" alt="" />
            <div class="info flex flex-column justify-content-end">
              <h4>App2</h4>
              <a href=""><i class="iconfont qm-link"></i></a>
            </div>
          </li>
          <li>
            <img src="../assets/images/portfolios/3@2x.png" alt="" />
            <div class="info flex flex-column justify-content-end">
              <h4>App3</h4>
              <a href=""><i class="iconfont qm-link"></i></a>
            </div>
          </li>
          <li>
            <img src="../assets/images/portfolios/3@2x.png" alt="" />
            <div class="info flex flex-column justify-content-end">
              <h4>App4</h4>
              <a href=""><i class="iconfont qm-link"></i></a>
            </div>
          </li>
          <li>
            <img src="../assets/images/portfolios/3@2x.png" alt="" />
            <div class="info flex flex-column justify-content-end">
              <h4>App5</h4>
              <a href=""><i class="iconfont qm-link"></i></a>
            </div>
          </li>
           <li>
            <img src="../assets/images/portfolios/1@2x.png" alt="" />
            <div class="info flex flex-column justify-content-end">
              <h4>App1</h4>
              <a href=""><i class="iconfont qm-link"></i></a>
            </div>
          </li>
        </ul>
      </div>
      <div class="more">
        <a href="" class="btn btn-orange">查看更多</a>
      </div>
    </div>
    <!-- End 作品展示 -->

    <!-- ======= 最新博客 ======= -->
    <div id="blog" class="section">
      <h2 class="section-title blue">我的博客</h2>
      <!-- 
      ajax
      [
        {
          title:'xxx1',
          desc:'23wewqwerdewqwerdes',
          createTime:'2022-1-2',
          cover:'/uploads/images/blog/2020404055.png'
        },
        {
          title:'xx2x',
          desc:'23wewqwerdewqwerdes',
          createTime:'2022-1-2',
          cover:'/uploads/images/blog/2020404055.png'
        },
              {
          title:'xxx',
          desc:'23wewqwerdewqwerdes',
          createTime:'2022-1-2',
          cover:'/uploads/images/blog/2020404055.png'
        },
        {
          title:'xxx',
          desc:'23wewqwerdewqwerdes',
          createTime:'2022-1-2',
          cover:'/uploads/images/blog/2020404055.png'
        },
              {
          title:'xxx',
          desc:'23wewqwerdewqwerdes',
          createTime:'2022-1-2',
          cover:'/uploads/images/blog/2020404055.png'
        },
        {
          title:'xxx',
          desc:'23wewqwerdewqwerdes',
          createTime:'2022-1-2',
          cover:'/uploads/images/blog/2020404055.png'
        },
      ]
     -->
      <ul class="blog-list flex flex-wrap justify-content-between">
        <li class="blog">
          <div class="img-box"></div>
          <div class="blog-info flex flex-column justify-content-evenly">
            <h3>大标题大标题大标题</h3>
            <p class="desc">
              jf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js ...
            </p>
            <div class="flex align-items-center justify-content-between">
              <span class="time"
                ><i class="iconfont qm-clock"></i>2022-07-21</span
              >
              <a href="" class="more-btn"
                >查看更多<i class="iconfont qm-arrow-right"></i
              ></a>
            </div>
          </div>
        </li>
        <li class="blog">
          <div class="img-box"></div>
          <div class="blog-info flex flex-column justify-content-evenly">
            <h3>大标题大标题大标题</h3>
            <p class="desc">
              jf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js ...
            </p>
            <div class="flex align-items-center justify-content-between">
              <span class="time"
                ><i class="iconfont qm-clock"></i>2022-07-21</span
              >
              <a href="" class="more-btn"
                >查看更多<i class="iconfont qm-arrow-right"></i
              ></a>
            </div>
          </div>
        </li>
        <li class="blog">
          <div class="img-box"></div>
          <div class="blog-info flex flex-column justify-content-evenly">
            <h3>大标题大标题大标题</h3>
            <p class="desc">
              jf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js ...
            </p>
            <div class="flex align-items-center justify-content-between">
              <span class="time"
                ><i class="iconfont qm-clock"></i>2022-07-21</span
              >
              <a href="" class="more-btn"
                >查看更多<i class="iconfont qm-arrow-right"></i
              ></a>
            </div>
          </div>
        </li>
        <li class="blog">
          <div class="img-box"></div>
          <div class="blog-info flex flex-column justify-content-evenly">
            <h3>大标题大标题大标题</h3>
            <p class="desc">
              jf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js ...
            </p>
            <div class="flex align-items-center justify-content-between">
              <span class="time"
                ><i class="iconfont qm-clock"></i>2022-07-21</span
              >
              <a href="" class="more-btn"
                >查看更多<i class="iconfont qm-arrow-right"></i
              ></a>
            </div>
          </div>
        </li>
        <li class="blog">
          <div class="img-box"></div>
          <div class="blog-info flex flex-column justify-content-evenly">
            <h3>大标题大标题大标题</h3>
            <p class="desc">
              jf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js ...
            </p>
            <div class="flex align-items-center justify-content-between">
              <span class="time"
                ><i class="iconfont qm-clock"></i>2022-07-21</span
              >
              <a href="" class="more-btn"
                >查看更多<i class="iconfont qm-arrow-right"></i
              ></a>
            </div>
          </div>
        </li>
        <li class="blog">
          <div class="img-box"></div>
          <div class="blog-info flex flex-column justify-content-evenly">
            <h3>大标题大标题大标题</h3>
            <p class="desc">
              jf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js ...
            </p>
            <div class="flex align-items-center justify-content-between">
              <span class="time"
                ><i class="iconfont qm-clock"></i>2022-07-21</span
              >
              <a href="" class="more-btn"
                >查看更多<i class="iconfont qm-arrow-right"></i
              ></a>
            </div>
          </div>
        </li>
      </ul>
      <div class="more">
        <a href="" class="btn btn-blue">查看更多</a>
      </div>
    </div>
    <!-- End 最新博客 -->
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'HomeView',
  components: {
  },
  data(){
    return {
      currentIndex:0,
    }
  },
  methods:{
    turnPage(step){
      if(step > 0){
        //向后翻
        if(this.currentIndex < 3){
          this.currentIndex += step
        }
        }
        else{
            if (this.currentIndex > 0) {
          this.currentIndex += step
        }
        }    
    },
    play() {
      this.timer = setInterval(() => {
        if (this.currentIndex >= 3) this.currentIndex = -1
        this.turnPage(1)
      }, 1000);
    },
    stop() {
      clearInterval(this.timer)
    },
  }
}
</script>
<style scoped>
@import url("../assets/css/blog-common.css");
@import url("../assets/css/index.css");
</style>
